<!-- eslint-disable vue/no-v-html -->
<template>
  <el-button
    plain
    @click="dialogVisible = true"
  >
    查看内容
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    append-to-body
    :title="title"
  >
    <div
      id="content"
      v-html="content"
    />
    <template #footer>
      <div>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

const dialogVisible = ref(false)

defineProps({
  title: {
    type: String,
    default: ''
  },
  content: {
    type: String,
    default: '没有填写内容'
  }
})
</script>

<style scoped>
#content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#content:deep(img) {
  width: 100%
}
</style>
